<script setup>
import { userStateStore } from '@/stores/userState'
import { inject,reactive } from 'vue'
const props = defineProps(['id','openTaskFolder']);
const userState = userStateStore();
const global = inject('global');

const tasks = reactive({
    show:false,
    id:0,
    name:'',
    list:[],
    created_at:0,
});

function openOrganization(data){
    tasks.show = true;
    tasks.id = data.id;
    tasks.created_at = data.created_at;
    tasks.name = data.name;
    tasks.list = data.task;
}

</script>

<template>
    <div class="appWindow" :id="id" >
        <div class="Organization" >
            <div class="organizationBoxList">
                
                <div class="title4">已加入班级</div>
                <template v-for="(item) in userState.user.organization">
                    <div class="OrganizationBox iconActive" @click="openOrganization(item)">
                        <div class="img"></div>
                        <div class="name">{{item.name}}</div>
                    </div>
                </template>
            </div>
            <div v-if="tasks.show" class="task">
                <div class="title4">{{tasks.name}}的作业</div>

                <div v-if="tasks.list.length==0" class="none">没有作业记录</div>
                <template v-for="(item) in tasks.list">
                    <div class="taskList" @click="openTaskFolder(item)">
                        <img class="img" src="@/assets/images/a.svg"/>
                        <div class="name">{{global.dateFormat(item.created_at)}}<span v-if="item.name != ''">({{item.name}})</span></div>
                    </div>
                </template>
            </div>
        </div>
        
        
    </div>
</template>
  
<style>
.Organization{ padding: 32px; padding-top: 20px; overflow: hidden;}
.title4{  font-size: 14px;  font-weight:600; padding-bottom:10px;}

.organizationBoxList{ overflow: hidden; padding-bottom: 10px;}
.OrganizationBox {
    float: left;
    background: #fff;
    box-shadow:0 1px 1px #00000040;
    width: 110px;
    display: flex;
    flex-direction: column;
    height: 94px;
    align-items: center;
    border-radius: 4px;
    margin: 8px;
}
.OrganizationBox .img{  width: 30px; height: 30px; background-image: url('@/assets/images/edge.png'); background-position: center; background-size: cover; margin-top: 24px;}
.OrganizationBox:hover { background-color: rgba(0,0,0,0.05);}
.OrganizationBox  .name{ padding-top: 8px;}

.taskList{ padding: 12px; height: 30px ; font-size: 16px; background-color: rgba(255,255,255,0.6);  line-height: 32px;font-weight: bold; border-bottom: 1px dotted rgba(0,0,0,0.1); border-radius: 5px;}
.taskList span{ color: darkred;}
.taskList:hover{ background-color: rgba(0,0,0,0.03);  border-bottom: 1px dotted rgba(0,0,0,0.1);}
.taskList .img{ width: 20px;  float: left; padding-right: 15px; margin-top: 5px;}
.task .none{ font-size: 30px; opacity: 0.6;}
</style>
